<template>
    <div class="main-container">
        <div
            :style="{'width': isCollpase === true ? '64px' : '200px'}"
            class="main-aside"
        >
            <el-menu
                :collapse="isCollpase"
                background-color="#87CEFA"
                text-color="#fff"
                @select="handlerSelect"
            >
                <el-menu-item index="/home">
                    <i class="el-icon-menu"></i>
                    <span slot="title">首页</span>
                </el-menu-item>
                <el-submenu
                    v-for="item in menuList"
                    :index="item.path"
                    :key="item.path"
                >
                    <template slot="title">
                        <i :class="item.icon"></i>
                        <span slot="title">{{item.name}}</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item
                            v-for="child in item.children"
                            :index="child.path"
                            :key="child.path"
                        >
                            {{child.mate.title}}
                        </el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
            </el-menu>
        </div>
        <div class="main-content">
            <div class="content-header">
                <div class="navbar">
                    <el-button
                        @click="isCollpase = !isCollpase"
                        :icon="isCollpase ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
                        type="text"
                        style="font-size: 30px"
                    ></el-button>
                </div>
                <div class="tags-view-container">
                    <el-tag
                        v-for="(item, index) in testList"
                        :key="index"
                        @click="toPage(item)"
                        size="small"
                        closable
                        @close="deleteTag(index)"
                        style="margin-left: 10px"
                    >
                        {{item.title}}
                    </el-tag>
                </div>
            </div>
            <div class="content-view">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>

<script>
import routerList from '../router/index.js'

export default {
    computed: {
        menuList () {
            //院系管理路由
            let departmentManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('departmentManagement')
            })

            //教师管理路由
            let teacherManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('teacherManagement')
            })
            
            //学生管理路由
            let studentManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('studentManagement')
            })
            //宿舍管理路由
            let dormitoryManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('dormitoryManagement')
            })
            //系统管理路由
            let systemManagementList = routerList.options.routes[1].children.filter(item => {
                return item.path.includes('systemManagement')
            })

            return [
                {
                    path: '/departmentManagement',
                    name: '院系管理',
                    icon: '',
                    children: departmentManagementList
                },
                {
                    path: '/teacherManagement',
                    name: '教师管理',
                    icon: '',
                    children: teacherManagementList
                },
                {
                    path: '/studentManagement',
                    name: '学生管理',
                    icon: '',
                    children: studentManagementList
                },
                {
                    path: '/dormitoryManagement',
                    name: '宿舍管理',
                    icon: '',
                    children: dormitoryManagementList
                },
                {
                    path: '/systemManagement',
                    name: '系统管理',
                    icon: '',
                    children: systemManagementList
                }
            ]
        }
    },
    data () {
        return {
            isCollpase: false,
            routerList: [],
            testList: []
        }
    },
    mounted () {
        this.testList = JSON.parse(sessionStorage.getItem('routeList'))
        this.routeTagList = JSON.parse(sessionStorage.getItem('routeList'))
    },
    watch: {
        $route: {
            handler (newValue) {
                let allRoute = routerList.options.routes[1].children

                let index = allRoute.findIndex(item => {
                    return newValue.path === item.path
                })

                // 如果当前跳转的路由已经存在this.routeTagList中,那么就不push
                let tagIndex = this.routeTagList.findIndex(item => {
                    return newValue.path === item.path
                })

                if (tagIndex >= 0) {
                    return
                }
                this.routeTagList.push({
                    path: newValue.path,
                    title: allRoute[index].mate.title
                })

                sessionStorage.setItem('routeList', JSON.stringify(this.routeTagList))

                this.testList = JSON.parse(sessionStorage.getItem('routeList'))
            }
        }
    },
    methods: {
        handlerSelect (item) {
            if (this.$route.path === item) {
                return
            }

            this.$router.push({
                path: item
            })
        },
        deleteTag (index) {
            this.routeTagList.splice(index, 1)

            sessionStorage.setItem('routeList', JSON.stringify(this.routeTagList))
        },
        toPage (item) {
            this.$router.push({
                path: item.path
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .main-container {
        display: flex;
        height: 100%;

        .main-aside {
            width: 200px;
            background-color: #00BFFF;
        }

        .main-content {
            flex: 1;

            .content-header {
                width: 100%;
                height: 84px;
                border-bottom: 1px solid #ddd;
                box-shadow: 0 1px 2px #ddd;

                .navbar {
                    height: 50px;
                }

                .tags-view-container {
                    display: flex;
                    align-items: center;
                    border-top: 1px solid #ddd;
                    height: 34px;
                }
            }
        }
        
        .el-menu {
            border-right: 1px solid transparent;

            .el-submenu {
                .el-menu {
                    .el-menu-item-group {
                        background: #87CEEB;

                        ul {
                            li.el-menu-item {
                                background-color: #87CEEB !important;
                            }
                        }
                    }
                }
            }
        }
    }
</style>